import {useEffect, useState} from "react";
import {DetailDataType, fetchDetailAPI} from "@/apis/detail.ts";
import {useNavigate, useSearchParams} from "react-router-dom";
import {NavBar} from "antd-mobile";

const Detail = () => {
    const [detail, setDetail] = useState<DetailDataType | null>(null)

    // 获取路由参数
    const [params] = useSearchParams();
    const id = params.get("id");
    useEffect(() => {
        const getDetail = async () => {
            try {
                const res = await fetchDetailAPI(id);
                setDetail(res.data.data)
            } catch (error) {
                throw new Error("fetch detail error")
            }
        }
        getDetail()
    }, [id]);

    // 点击返回
    const navigate = useNavigate();
    const back = () => {
        navigate(-1)
    }

    // 数据返回之前，先用 loading 渲染，做占位
    if (!detail) {
        return <div>this is loading...</div>
    }

    // 数据返回之后，正式渲染的内容
    return (
        <div>
            <NavBar onBack={back}>{detail.title}</NavBar>
            <div dangerouslySetInnerHTML={{__html: detail.content}}></div>
        </div>
    )
}

export default Detail